<template>
  <div style="padding-top: 10px">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      chart: null,
      cdata: {
        indicatorData: [
          { name: "照明", max: 300 },
          { name: "新风", max: 250 },
          { name: "排风", max: 300 },
          { name: "控制器", max: 300},
          { name: "空调", max: 300 }
        ],
        series:[{
          name: 'sss',
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            width: 1
          },
          emphasis: {
            areaStyle: {
              color: 'rgba(0,250,0,0.3)'
            }
          },
          data: [{
            value: 0,
            name: ""
          }]
        }],
      }
    }
  },
  components: {
    Chart,
  },
  watch: {
    chartData: {
      handler(val) {
        this.setOptions(val)
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (this.chartData != null && this.chartData.deptDevice != null) {
        this.setOptions(this.chartData)
      }
    },

    setOptions({deptDevice} ={}){
      this.cdata= {
        indicatorData: [
          { text: '照明', max: deptDevice.max[0] },
          { text: '新风', max: deptDevice.max[1] },
          { text: '排风', max: deptDevice.max[2] },
          { text: '控制器', max: deptDevice.max[3] },
          { text: '空调', max: deptDevice.max[4] }
        ],
        series: (function() {
          const series = [];
          for (let i = 0; i < deptDevice.content.length; i++) {
          series.push({
            name: 'sss',
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 1
            },
            emphasis: {
              areaStyle: {
                color: 'rgba(0,250,0,0.3)'
              }
            },
            data: [{
              value: deptDevice.content[i].value,
              name: deptDevice.content[i].name
            }]
          })
        }
        return series
      })()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
